<template>
    <div class="left_Side">
        <div class="icon">
            <i></i>
            <i></i>
            <i></i>
        </div>
        <div class="contentBox">
            <div  v-for="(item,i) in contTaps" :key="i" :class="i==isTapModule?'active':''" class="item"  @click="TapItem(i,item)">
                <p class="name">{{item.name}}</p>
                <div class="imgbox">
                    <img class="img" v-if="i==isTapModule" :src="item.actimg" alt="">
                    <img class="img" v-else :src="item.img" alt="">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
    name:'leftSide',
     computed:{
         ...mapState({
             isTapModule:state =>state.TaskModule.isTapModule||sessionStorage.getItem('isTapModule')||0,
             TapModuleName:state =>state.TaskModule.isTapModule||sessionStorage.getItem('TapModuleName')||"设备齐套",
         })
     },
    data(){
        return{
            contTaps:[
                { name : '设备齐套'    ,img:require('../../assets/images/components/shebei.png')      ,actimg:require('../../assets/images/components/shebei_active.png')      },
                { name : '设备展开'    ,img:require('../../assets/images/components/shebeizankai.png'),actimg:require('../../assets/images/components/shebeizankai_active.png')},
                { name : '单机功能测试',img:require('../../assets/images/components/danjicesi.png')   ,actimg:require('../../assets/images/components/danjicesi_active.png')   },
                { name : '单项功能测试',img:require('../../assets/images/components/danxiangces.png') ,actimg:require('../../assets/images/components/danxiangces_active.png') },
                { name : '系统性能测试',img:require('../../assets/images/components/xtces.png')       ,actimg:require('../../assets/images/components/xtces_active.png')       },
            ]
        }
    },
    methods: {
        TapItem(idx,item){
            this.$store.commit('actModule', idx);// 点击某个元素 记为公用状态 
            this.$store.commit('actModuleName', item.name);// 点击某个元素 记住tab名 
        }
    },
    created(){
        // this.$store.commit('actModule', 0);
    },

}
</script>
<style lang="less" scoped>
.left_Side{
    .icon{
        margin-top: 10px;
        &>i{
            display: flex;
            flex-direction: column;
            margin: 2px auto;
            height: 2px;
            width: 20px;
            background: #505971;
        }
    }
    width: 1.3rem;
    height: calc(100vh - 1.3rem);
    background: #F2F3F7;
    box-shadow: 0px 3px .31rem 1px rgba(95, 99, 115, 0.25);
    .contentBox{
        display: flex;
        flex-direction: column;
        padding: 0 .1rem;
        .active{
            .name{
                color: #285FE3 !important;
            }
        }
        .item{
            display: flex;
            margin: .1rem 0;
            cursor:auto;
            flex-direction: column;
            display: flex;
            align-items: center;
            width: 1.1rem;
            height: 1.1rem;
            background: #F2F3F7;
            border: 1px solid #C6CDDC;
            .name{
                color: #505971;
                cursor: pointer;
                font-size: 16px;
                text-align: center;
                width: 1.08rem;
                height: 12px;
                background: #E5E7EC;
            }
            .imgbox{
                    cursor: pointer;
                    width: .5rem;
                    height: .5rem;
                    margin-top: .1rem;
                    text-align: center;
                    display: flex;
                    .img{
                        width: .5rem;
                        height: .5rem;
                    }
                }
        }
    }
}
</style>